<template>
  <el-form-item>
    <el-button  type="primary" @click="beforeAddUser">下单</el-button>
    <el-button type="primary" >搜索</el-button>
    <el-button  type="primary" @click="saveUser">添加</el-button>
  </el-form-item>
  <el-card style="margin: 20px;">
    <el-table :data="userList">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="手机号" prop="phone" align="center"></el-table-column>
      <el-table-column label="订单菜品id" prop="billId" align="center"></el-table-column>
      <el-table-column label="订单价格" prop="price" align="center"></el-table-column>
      <el-table-column label="备注" prop="notes" align="center"></el-table-column>
      <el-table-column label="下单时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template>
          <el-button type="primary">密码重置</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog  v-model="dialogVisible"  style="width: 1000px;padding: 40px;">
    <el-table >
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="手机号" prop="phone" align="center"></el-table-column>
      <el-table-column label="订单菜品id" prop="billId" align="center"></el-table-column>
      <el-table-column label="订单价格" prop="price" align="center"></el-table-column>
      <el-table-column label="备注" prop="notes" align="center"></el-table-column>
      <el-table-column label="下单时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template>
          <el-button type="primary">密码重置</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

// 定义变量保存用户列表数据
const userList = ref([]);
// 定义变量保存表单数据
const saveUserForm = ref({
  username: '',
  phone: '',
  billId: '',
  price: '',
  notes: '',
  createTime: '',
  status: ''
});

//定义加载用户列表数据
const loadUser = () =>{
  let data = qs.stringify(saveUserForm.value);
  axios.get(BASE_URL+'v1/user/select?'+data).then((response)=>{
    if (response.data.code === 2000)
    {userList.value= response.data.data;
      console.log(userList.value);
    }else{
      ElMessage.error(response.data.message);
    }
  }).catch((error)=>{
    ElMessage.error('请求发生错误：'+error.message);
  })
}
// 页面加载时执行
onMounted(()=>{
  loadUser();
})

//定义变量控制弹窗是否出现
const dialogVisible = ref(false);
//定义变量用来控制弹窗的标题

const beforeAddUser = () => {
  //显示弹窗
  dialogVisible.value = true;
}
const beforeAddUser2 = () =>{
  dialogVisible.value= true;
}
const handleClose = () => {
  if(confirm('您确认要关闭弹窗吗?')){
    //关闭弹窗
    dialogVisible.value = false;
    //并且清空表单数据
  }
}
//保存用户
const saveUser = () =>{
  let data =qs.stringify(saveUserForm.value);
  axios.post(BASE_URL+'/user/save',data).then((response)=>{
    if (response.data.code === 2000)
    {ElMessage.success(response.data.message);
      dialogVisible.value = false;
      saveUserForm.value = {};
      loadUser();
    }else{
      ElMessage.error(response.data.message);
    }
})
}

</script>

<style>

</style>
